<template>
  <div class="decoration-box" v-if="tplItemData.end_time || tplItemData.next_start_time" :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <template v-if="tplItemData.layout == 2">
      <div class="main-con2">
        <div class="tabs-wrap">
          <div class="item-hr">
            <div class="hr" :style="{'background': tplItemData.bgColor}"></div>
            <div class="title" :style="{'color': tplItemData.fontColor}" style="color: <%=content.fontColor%>">限时抢购</div>
          </div>
          <div class="sec-time">
            <span class="time-title" :style="{'color': tplItemData.fontColor}">距{{activityType === 1 ? '结束' : '开始'}}:</span>
            <count-down :actEndTime="actEndTime" :background="tplItemData.fontColor" color="#FFFFFF" :type="4" :random="random" secondColor="#fff" :secondBackground="tplItemData.fontColor" ></count-down>
          </div>
        </div>
        <div class="goods-list">
          <div class="list" @click="openLink(item.link)" v-for="(item) in goodsList" :key="item.item_id">
            <div class="goods-pic"><img :src="item.pic"/></div>
            <div class="goods-msg">
              <div class="goods-title">{{item.title}}</div>
              <div :class="tplId== 6 ? 'tpl_price-box' : 'price-box'">
                <div class="price" v-html="scaleGoodsPriceFn(item.price)"></div>
                <div class="ori-price">¥{{item.original_price}}</div>
              </div>
              <!-- <div class="shop-car" :style="{'background': tplItemData.bgColor}"><i></i></div> -->
            </div>
          </div>

        </div>
      </div>
    </template>
    <template v-else>
    <div class="tabs">
      <p class="tab-item" v-if="tplItemData.end_time" :style="{'color':activityType === 1 ? tplItemData.fontColor : '#333', background: activityType === 1 ? tplItemData.bgColor : '#FFF'}" @click="handleChangeTab(1)">正在抢购</p>
      <p class="tab-item" v-if="tplItemData.next_start_time"  :style="{'color':activityType === 2 ? tplItemData.fontColor : '#333', background: activityType === 2 ? tplItemData.bgColor : '#FFF'}" @click="handleChangeTab(2)">下期好物</p>
    </div>
    <section class="main-con">
       <div class="sec-time-box">
        <span class="sub-title">限时抢购</span>
        <div class="sec-time">
          <span class="time-title">距{{activityType === 1 ? '结束' : '开始'}}:</span>
          <count-down :actEndTime="actEndTime" background="#5C5C5C" color="#FFFFFF" :type="1" :random="random" :secondColor="tplItemData.fontColor" :secondBackground="tplItemData.bgColor" ></count-down>
        </div>
      </div>
      <div class="goods-list" v-for="(item) in goodsList" :key="item.item_id">
        <div class="goods-banner-box" v-if="item.pic" :style="{border:' 5px solid' + tplItemData.bgColor}">
          <div class="goods-pic"><img :src="item.pic" alt=""></div>
          <div class="bg-img">
            <img :src="tplItemData.bgImg ? tplItemData.bgImg : 'https://img.wifenxiao.com/h5-wfx/images/limit_activity_bg.png'" alt="">
            <div v-if="item.discount_price && item.discount_price > 0" class="discount-pri" :style="{'color': tplItemData.fontColor, background: tplItemData.bgColor}">优惠：{{item.discount_price}}元</div>
          </div>
        </div>
        
        <div class="goods-info">
          <div class="goods-title">{{item.title}}</div>
          <div class="progress-box">
            <div class="percentage"><span :style="{width:(item.sales_num / item.num * 100)+'%',background: tplItemData.bgColor}"></span></div>
            <div class="progress-text">已抢{{item.sales_num}}件</div>
          </div>
          <div class="goods-price">
            <div :class="tplId== 6 ? 'tpl_price-box' : 'price-box'">
              <div class="price" v-html="scaleGoodsPriceFn(item.price)"></div>
              <div class="ori-price">¥{{item.original_price}}</div>
            </div>
            <div class="btn" @click="openLink(item.link)" :style="{'color': tplItemData.fontColor, background: tplItemData.bgColor}">马上抢</div>
          </div>
        </div>
      </div>
    </section>
    </template>
  </div>
</template>
<script>
import countDown from '@/components/countDown'
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage } from '@/utils/utils.js'
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  components: {
    countDown
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    },
    tplId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      actEndTime: '',
      random: Math.random(2),
      activityType: 1,
      goodsList: []
    }
  },
  created() {
    // this.tplItemData.next_start_time = '2021-12-08 10:08:33'
    // this.tplItemData.end_time = '2021-11-08 10:08:33'
    if (this.tplItemData.end_time && this.tplItemData.next_start_time) {
      this.activityType = 1
      this.actEndTime = this.tplItemData.end_time
      this.goodsList = this.tplItemData.goodsList
    } else if (this.tplItemData.end_time && !this.tplItemData.next_start_time) {
      this.activityType = 1
      this.goodsList = this.tplItemData.goodsList || []
      this.actEndTime = this.tplItemData.end_time
    } else if (!this.tplItemData.end_time && this.tplItemData.next_start_time) {
      this.activityType = 2
      this.goodsList = this.tplItemData.nextGoodsList || []
      this.actEndTime = this.tplItemData.next_start_time
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    handleChangeTab(type) {
      clearInterval()
      if (type === 1) {
        this.goodsList = this.tplItemData.goodsList || []
        this.actEndTime = this.tplItemData.end_time
      } else {
        this.goodsList = this.tplItemData.nextGoodsList || []
        this.actEndTime = this.tplItemData.next_start_time
      }
      this.activityType = type
    },
    openLink(link) {
      openPage(link)
    }
  }
})
</script>
<style lang="scss">
@import "src/styles/mixin";
// 样式 2
.main-con2 {
  .tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    margin-bottom: 24px;
    .hr {
        background: #00c257;
        width: 8px;
        margin-right: 16px;
        height: 44px;
        border-radius: 16px;
    }
    .title {
        font-size: 32px;
        font-weight: 500;
        margin-right: 24px
    }
    .sec-time, .item-hr {
      display: flex;
      font-weight: 500;
      align-items: center;
      .time-title {
        margin-right: 10px;
        font-size: 28px;
      }
    }
  }
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 220px;
      margin-right: 24px;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 20px;
      overflow: hidden;
      &:nth-child(3n) {
        margin-right: 0
      }
      .goods-pic {
        width: 100%;
        height: 220px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .goods-msg {
        padding: 16px;
        position: relative;
        .shop-car {
          position: absolute;
          width: 50px;
          height: 50px;
          border-radius: 56px;
          right: 16px;
          bottom: 16px;
          background: #00c257;
          i {
            display: block;
            width: 50px;
            height: 50px;
            background: url("https://img.wifenxiao.com/h5-wfx/images/diy/shop-car.png")center center no-repeat;
            background-size: 25px 24px;
          }
        }
        .goods-title {
          @include lineClamp(28px,36px,1);
          // font-size: 28px!important;
          font-weight: 500;
          margin-bottom: 18px;
        }
        .price-box {
          margin-top: 18px;
          .price .price-scale .num-font{
            font-size: 40px !important;
            color: #F97D0B!important;
            // font-family: DIN Alternate;
          }
          .price .price-scale .num-back, .price .price-scale .unit {
            color: #F97D0B!important;
            // font-family: DIN Alternate;
          }
          .ori-price {
            font-size: 24px;
            color: #999999;
            // font-family: DIN Alternate;
            text-decoration: line-through;
          }
        }
        .tpl_price-box {
          margin-top: 18px;
          .price .price-scale .num-font{
            font-size: 40px !important;
            color: #979E06!important;
            // font-family: DIN Alternate;
          }
          .price .price-scale .num-back, .price .price-scale .unit {
            color: #979E06!important;
            // font-family: DIN Alternate;
          }
          .ori-price {
            font-size: 24px;
            color: #999999;
            // font-family: DIN Alternate;
            text-decoration: line-through;
          }
        }
      }

    }

  }
}
.decoration-box {
  overflow: hidden;
  .tabs {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    background: #ffffff;
    .tab-item {
      padding: 32px 56px;
      font-size: 32px;
      color: #333333;
      font-weight: bold;
      border-radius: 16px 16px 0 0;
    }
    // .active {
    //   background: #FFE5E3;
    //   color: #E95C51;
    //   border-radius: 16px 16px 0 0;
    // }
  }
  .main-con {
    background: #F2F2F2;
    padding: 0 20px;
    .sec-time-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      .sub-title {
        font-size: 28px;
        color: #333333;
        font-weight: bold;
      }
      .sec-time {
        display: flex;
        align-items: center;
        
        .time-title,.count-down .time-count .day {
          font-size: 28px !important;
          color: #333333 !important;
          font-weight: bold !important;
        }
        
      }
    }
    .goods-list {
      margin-top: 28px;
      .goods-banner-box {
        display: flex;
        border: 10px solid #E95C51;
        height: 400px;
        border-radius: 16px 16px 0 0;
        padding: 0;
        justify-content: space-between;
        .goods-pic {
          width: 400px;
          background: #EEEEEE;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bg-img {
          position: relative;
          width: 288px;
          flex: 1;
          img {
            width: 100%;
            height: 100%;
          }
          .discount-pri {
            position: absolute;
            right: -1px;
            bottom: -2px;
            font-size: 28px;
            text-align: center;
            color: #ffffff;
            background: #E95C51;
            border-radius: 158px 0 0 0;
            padding: 16px 20px 8px 30px;
          }
        }
      }
      .goods-info {
        background: #ffffff;
        padding: 20px;
        .goods-title {
          font-size: 28px;
          color: #333333;
          padding-bottom: 20px;
        }
        .progress-box {
          display: flex;
          align-items: center;
          .percentage {
            width: 440px;
            height: 12px;
            background: #EEEEEE;
            border-radius: 8px;
            span {
              height: 100%;
              display: block;
              border-radius: 8px;
              background: #E95C51;
            }
          }
          .progress-text {
            margin-left: 20px;
            font-size: 24px;
            color: #999999;
          }
        }
        .goods-price {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 30px;
          .price-box {
            display: flex;
            align-items: center;
            .price .price-scale .num-font{
              font-size: 40px !important;
            }
            .ori-price {
              font-size: 24px;
              color: #999999;
              text-decoration: line-through;
              margin-left: 8px;
              margin-top: 8px;
            }
          }
          .btn {
            width: 176px;
            height: 60px;
            background: #E95C51;
            font-size: 28px;
            color: #ffffff;
            line-height: 60px;
            text-align: center;
            border-radius: 42px;
          }
        }
      }
    }
  }
}
</style>